{layout name="layout" /}

<style>
    td .icon {
        font-size: 18px;
    }
    .table a{
        text-decoration: none;
    }
</style>

<div class="pd-20 text-c">
    <div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l">
            <a href="javascript:;" class="btn btn-danger radius" onclick="del_all()">
                <i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>
            <a href="{:url('add')}" class="btn btn-primary radius">
                <i class="Hui-iconfont">&#xe600;</i> 添加栏目</a>
            <a href="javascript:;" class="btn btn-success radius" onclick="load_all()">
                <i class="Hui-iconfont">&#xe600;</i> 展开所有栏目</a>
        </span>
        <span class="r">共有数据：
            <strong id="counts"></strong> 条</span>
    </div>
    <div class="mt-20">
        <table class="table table-border table-bordered table-hover table-bg table-sort">
            <thead>
                <tr class="text-c">
                    <th width="25">
                        <input type="checkbox" name="" value="">
                    </th>
                    <th width="80">ID</th>
                    <th width="25%">栏目名称</th>
                    <th width="120">模板</th>
                    <th width="80">是否启用</th>
                    <th width="80">排序</th>
                    <th width="20%">描述</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {foreach $data as $value}
                <tr class="text-c">
                    <td>
                        <input type="checkbox" name="checkbox[]" value="{$value.id}">
                    </td>
                    <td class="text-l">{empty name="value.child"}
                        <a href="javascript:void(0);" class="category" data-status="0">
                            <i class="icon Hui-iconfont">&#xe601;</i>&nbsp;
                            <span>{$value.id}</span>
                        </a>
                        {else/}
                        <a href="javascript:void(0);" class="category" data-status="0">
                            <i class="icon Hui-iconfont">&#xe716;</i>&nbsp;
                            <span>{$value.id}</span>
                        </a>
                        {/empty}
                    </td>
                    <td>{$value.name}</td>
                    <td>{$value.template}</td>
                    <td>{$value.status}</td>
                    <td>{$value.sort}</td>
                    <td class="text-l">{$value.description}</td>
                    <td class="f-14">
                        <a title="编辑" href="{:url('edit','id='.$value.id)}" class="ml-10" style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6df;</i>
                        </a>
                        <a title="删除" href="javascript:;" onclick="del(this,'{$value.id}')" class="ml-10" style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6e2;</i>
                        </a>
                </tr>
                {notempty name="value.child"} {foreach $value.child as $val}
                <tr class="text-c level_{$value.id} son" style="display:none;">
                    <td>
                        <input type="checkbox" name="checkbox[]" value="{$val.id}">
                    </td>
                    <td class="text-c">{empty name="val.child"}
                        <a href="javascript:void(0);" class="category" data-status="0">
                            <i class="icon Hui-iconfont">&#xe601;</i>&nbsp;
                            <span>{$val.id}</span>
                        </a>
                        {else/}
                        <a href="javascript:void(0);" class="category" data-status="0">
                            <i class="icon Hui-iconfont">&#xe716;</i>&nbsp;
                            <span>{$val.id}</span>
                        </a>
                        {/empty}
                    </td>
                    <td>{$val.name}</td>
                    <td>{$val.template}</td>
                    <td>{$val.status}</td>
                    <td>{$val.sort}</td>
                    <td class="text-l">{$val.description}</td>
                    <td class="f-14">
                        <a title="编辑" href="{:url('edit','id='.$val.id)}" class="ml-10" style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6df;</i>
                        </a>
                        <a title="删除" href="javascript:;" onclick="del(this,'{$val.id}')" class="ml-10" style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6e2;</i>
                        </a>
                    </td>
                </tr>
                {notempty name="val.child"} {foreach $val.child as $vo}
                <tr class="text-c level_{$val.id}  top_{$value.id}  grandson" style="display:none">
                    <td>
                        <input type="checkbox" name="checkbox[]" value="{$vo.id}">
                    </td>
                    <td class="text-r">
                        <i class="icon Hui-iconfont">&#xe601;</i>&nbsp;
                        <span>{$vo.id}</span>
                    </td>
                    <td>{$vo.name}</td>
                    <td>{$vo.template}</td>
                    <td>{$vo.status}</td>
                    <td>{$vo.sort}</td>
                    <td class="text-l">{$vo.description}</td>
                    <td class="f-14">
                        <a title="编辑" href="{:url('edit','id='.$vo.id)}" class="ml-10" style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6df;</i>
                        </a>
                        <a title="删除" href="javascript:;" onclick="del(this, '{$vo.id}')" class="ml-10" style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6e2;</i>
                        </a>
                    </td>
                </tr>
                {/foreach} {/notempty} {/foreach} {/notempty} {/foreach}
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    /*计算栏目条数*/
    var count_tr = $('tr').length;
    // console.log(count_tr);

    $("#counts").text(count_tr - 1);

    /*栏目-折叠/展开*/
    $(function () {
        $(".category").click(function () {
            var id = $(this).children('span').text();
            var status = $(this).data('status');
            // console.log(id);
            // console.log(status);

            if (status == 1) {
                $(".level_" + id).css('display', 'none');
                $(".top_" + id).css('display', 'none');
                $(this).children('img').attr('src', '/static/images/add.gif')
                $(this).data('status', 0);
                $(".level_" + id).children('td').children('.category').data('status', 0);
                return false;
            }
            $(".level_" + id).css('display', '');
            $(this).children('img').attr('src', '/static/images/subtract.gif')
            $(this).data('status', 1);

            return false;
        })
    });

    /*展开所有栏目*/
    function load_all() {
        $('.son').toggle();
        $('.grandson').toggle();
    }
</script>
<!--/请在上方写此页面业务相关的脚本-->